<!--作者：彭心愉
描述：小组评分页面
修改人：彭心愉  -->
<template>
<hr class="langHr">
<hr class="shortHr">
<div class="nav">
    <div class="nav1" @click="jumpMyScore">个人评分<span></span> <span></span>   <hr class="leftline" ><hr class="rightline"></div>
    <div class="nav2">小组评分<span></span> <span></span>   <hr class="leftline" ><hr class="rightline"></div>
</div>
 <div class="search">
         <el-row :gutter="20">
            <!-- <el-input v-model="itemname" class="w-50 m-2 inputtext"  placeholder="项目名称" /> -->
            <el-cascader :options="Project" placeholder="项目名称"  class="w-50 m-2 inputtext"/>
         </el-row>
        <el-row :gutter="20">
            <!-- <el-input  class="w-50 m-2 inputtext"  placeholder="小组名称" /> -->
            <el-cascader :options="Teams" placeholder="小组名称"  class="w-50 m-2 inputtext"/>
        </el-row>
        <el-row :gutter="20">
            <el-button color="#3e94ad" class="btn" >查询</el-button>
        </el-row>

</div>
<div class="content">
    <div class="cards">
        <div class="card" v-for="(i,num) in 6" :key="num">
            <span  class="carsColor"></span>
            <div class="teamName">做大做强(小组名)</div><div class="leader">王大壮(组长)</div>
            <img src="@/assets/imgs/otherIcon.png" @click="jumpTeamScoreInfo">
        </div>
    </div>
        <div id="customerChart"></div>
</div>

<!-- 弹窗 -->
       <div class=" el-overlay is-message-box" v-if="pageShow">
            <div class="addpage">
                <team-scoreInfo @closeclick="closeclick"></team-scoreInfo>
            </div>
        </div>

</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import { Calendar } from '@element-plus/icons-vue'
import * as echarts from 'echarts';
import {onMounted,ref} from 'vue'
import teamScoreInfo from './TeamScoreInfo.vue';
export default{
    name:'TeamScore',
    components:{teamScoreInfo},
     setup() {
        //  下拉框
            const Teams = [
                {
                    value: "team1",
                    label: "小组1",
                },
                {
                    value: "team2",
                    label: "小组2",
                },
            ];
            const Project = [
                {
                    value: "name1",
                    label: "项目1",
                },
                {
                    value: "name2",
                    label: "项目2",
                },
            ];
         const itemname = ref('')
         const teamName = ref('')
         const router =  useRouter()
         const route = useRoute()
         function jumpMyScore() {
             router.push(  {name:'myscore'} )
         }
            
        let pageShow = ref(false)
        function jumpTeamScoreInfo() {
            //  router.push(  {name:'teamscoreinfo'} )
            pageShow.value=true
        }
        function closeclick(isclose){
            if(isclose==false){
                pageShow.value=false
            }
        }
        onMounted(() => {//需要获取到element,所以是onMounted的Hook
        let myChart = echarts.init(document.getElementById("customerChart"));
        // 绘制图表
        myChart.setOption({
                // title: {
                //     text: 'Referer of a Website',
                //     subtext: 'Fake Data',
                //     left: 'center'
                // },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    // left: 'left'
                    bottom:'bottom'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '70%',
                        data: [
                            { value: 1048, name: '良好' },
                            { value: 735, name: '优秀' },
                            { value: 580, name: '及格' },
                            { value: 484, name: '不及格' },
                            // { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
        });
        window.onresize = function () {//自适应大小
            myChart.resize();
        };
        });
        return{
            pageShow,
            itemname,
            teamName,
            Calendar,
            jumpMyScore,
            jumpTeamScoreInfo,
            closeclick,
            Teams,
            Project
        }
  },
 

}
</script>

<style lang="less" scoped>
.langHr{
    margin:0 60px;
    border: 1px solid rgb(194, 218, 226);
    margin-top: 90px;
    background-color: rgb(194, 218, 226);
}
.shortHr{
    margin-left: 60px;
    width: 200px;
    border: 4px solid rgb(62, 148, 173);
    margin-top: -4px;
    border-radius: 20px;
    background-color: rgb(62, 148, 173);

}
.nav{

    margin-left: 100px;
    margin-top: 20px;
    .nav1,.nav2{
        cursor: pointer;
        position: relative;
        width: 100px;
        height: 40px;
        border: 1px #999 solid;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        span{
            position: absolute;
            width: 4px;
            height: 4px;
            border: 1px #999 solid;
            border-radius: 50%;
            top:3px;
            background-color: white;
        }
        span:nth-child(1){
            left: 20px;
        }
        
    }
    .nav1{
        background-color: white;
        margin-bottom: 10px;
        color: black;
        hr{
            width: 28px;
            transform:rotate(90deg);
            position: absolute;
            top: -7px;
             background-color: #999;

        }
        .leftline{
            left: 8px;
            border: 1px solid #999;
        }
        .rightline{
            left: 66px;
            border: 1px solid #999;
        }
    }
    .nav2{
        background-color: #3e94ad;
        color: white;
        hr{
            width: 17px;
            transform:rotate(90deg);
            position: absolute;
            top: -3px;
             background-color: #999;
        }
         .leftline{
            left: 13px;
            border: 1px solid #999;
        }
        .rightline{
            left: 71px;
            border: 1px solid #999;
        }
    }
}


.content{
    @font-face{
        font-family:kaiti;
        src:url('@/assets/fontStyle/方正楷体_GBK.TTF')
    }
    width: 800px;
    // border: 1px #999 solid;
    margin-left: 60px;
    margin-top: 20px;
    .cards{
        display:flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .card {
            margin-top: 20px;
            position: relative;
            background-color: white;
            // display: flex;
            height: 100px;
            width: 350px;
            border-radius: 20px;
            box-shadow: 19px 1px 20px rgb(219, 214, 214);
            .carsColor{
                display: inline-block;
                position: absolute;
                top: 15px;
                left: 30px;
                width: 70px;
                height: 70px;
                background-color: aquamarine;
                border-radius: 20px;
            }
            .teamName{
                position: absolute;
                top:15px;
                left: 130px;
                font-size: 18px;
                // font-family: Microsoft YaHei;
            }
            .leader{
                position: absolute;
                top:55px;
                left: 130px;
    
            }
            img{
                width: 18px;
                height: 18px;
                position: absolute;
                right: 30px;
                top: 10px;
                cursor: pointer;
            }
        }
    }
    #customerChart{
        width: 400px;
        height: 350px;
        // border: #3e94ad 1px solid;
        margin-left: 800px;
        margin-top: -345px;
        background-color: rgba(249, 251, 252, 60%);
        border-radius: 30px;
    }
}

.addpage{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
}
.search{
    position: absolute;
    display: flex;
    width: 500px;
    top: 150px;
    right: 150px;
    // margin:0 70px;
    // margin-top: 20px;
    justify-content: space-between;
    // .inputtext{
    //     margin-right: 40px;
    // }
    // .btn{
    //     margin-right: -40px;
    // }
    
}
</style>